<template>
    <div id="find">
        <!-- 头部，logo -->
        <div class="header">
            <div class="header-nav">
                <div class="header-logo">
                    <div class="header-logo-con" @click="toHome">
                        <img src="../img/logo.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 主体部分 -->
        <div class="main">
            <!-- 返回登录 -->
            <div class="goLogin">
                <div class="goLogin-con" >
                    <span class="goLogin-con-img">
                        <img src="../img/返回.png" alt="">
                    </span>
                    <span @click="toLogin">返回登录</span>
                </div>
            </div>
            <!-- 找回密码过程 -->
            <div class="find-con">
                <!-- 标题 -->
                <div class="find-title">
                    <p>找回密码</p>
                </div>
                <div class="find-list">
                    <!-- 验证信息过程 -->
                    <div class="find-one">
                        <div class="find-line">
                            <span></span>
                        </div>
                        <div class="find-one-text">
                            <div>
                                <span>1</span>
                            </div>
                            <div class="one-text-div">验证信息</div>
                        </div>
                    </div>

                    <!-- 更改密码部分 -->
                    <div class="find-two">
                        <div class="find-line" :class="{ color:num == 2 || num == 3 }" >
                            <span></span>
                        </div>
                        <div class="find-two-text">
                            <div>
                                <span :class="{ color:num == 2 || num == 3 }" >2</span>
                            </div>
                            <div class="two-text-div">更改密码</div>
                        </div>
                    </div>

                    <!-- 完成更改密码部分 -->
                    <div class="find-three">
                        <div class="find-line" :class="{color:num==3}">
                            <span></span>
                        </div>
                        <div class="find-three-text" >
                            <div>
                                <span :class="{color:num==3}">3</span>
                            </div>
                            <div class="three-text-div">完成</div>
                        </div>
                    </div>
                     <div class="find-four">
                        <div class="find-line" :class="{color:num==3}">
                            <span></span>
                        </div>
                    </div>
                </div>

                <!-- 验证信息过程 -->
                <div class="form-con" v-show="num==1">
                     <div class="form-input">
                        <p><input type="text" @blur="checkPhone($event)" v-model="phone" name="username" id="" placeholder="手机号/邮箱/用户名" /></p>
                        <div class="errText">
                            <p v-show="errData.errPhone">密码或用户名错误</p>
                        </div>
                        <p>
                            <input type="text" @blur="checkyzm($event)" v-model="phoneyzm" class="yanzhengma" placeholder="输入验证码">
                            <input class="yanzhengma btn2" type="button" :disabled="setdisabled" @click="getnum($event);getyzm()"  :value="setText">
                        </p>
                         <div class="errText">
                            <p v-show="errData.erryzm">验证码不能为空</p>
                        </div>
                        <div class="yanzhengmaTip" v-show="num==1 && setdisabled==true">
                            <p>已发送短信验证码,请注意查收</p>
                        </div>
                        
                        <p><input @click="getPwd()"  type="button" class="button" value="下一步" /></p>
                    </div>
                </div>
                <!-- 更改密码部分 -->
                <div class="form-con" v-show="num==2">
                     <div class="form-input">
                        <p><input type="password" @blur="checkpwd1()" v-model="pwd1" name="password" id="password1" placeholder="输入重置密码" /></p>
                        <div class="errText">
                            <p v-show="errData.errPwd1">密码不能为空</p>
                        </div>
                         <p><input type="password" @blur="checkpwd2()" v-model="pwd2" name="password" id="password2" placeholder="确定密码" /></p>
                         <div class="errText">
                            <p v-show="errData.errPwd2">密码不一致</p>
                        </div>
                        <p><input @click="setPwd()"  type="button" class="button" value="下一步" /></p>
                    </div>
                </div>
                <!-- 完成部分 -->
                 <div class="form-con" v-show="num==3">
                     <div class="form-input">
                        <div class="form-input-yuan1">
                            <div class="form-input-img">
                                <img src="../img/密码重置成功.png" alt="">
                            </div>
                        </div>
                        <p class="form-input-text">你的密码已重置，请牢记!</p>
                        <p><input @click="toLogin"  type="button" class="button" value="返回登录" /></p>
                        <p v-show="setSuccess" class="form-input-time">{{setTimeText}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import '../scss/find.scss';
// 引入正则表达式
import ApiCheck from '../utils/ApiCheck.js';

export default {
    created () {
        //默认开始时显示手机验证表单
        this.num=1;
    },
    data() {
        return {
            // 手机号码
            phone:'',
            // 验证吗
            phoneyzm:'',
            // 密码1
            pwd1:'',
            // 重置的密码
            pwd2:'',
            // 错误提示
            errData:{
                errPhone:false, //手机号码格式错误
                errPwd1:false,  //密码错误
                errPwd2:false,  //重置密码错误
                errYzm:false,   //手动验证不通过
                erryzm:false,
            },
            // num是判断显示那个过程
            num:1,
            // 按钮显示的文本
            setText:"获取手机验证码",
            // 验证按钮是否可选中
            setdisabled:false,
            // 显示时间
            yzmTime:60,
            // 返回登录页时间
            goLoginTime:5,
            // 判断是否重置密码成功
            setSuccess:false,
            // 判断是否跳转到登录页
            isGoLogin:false,
            setTimeText:''
        };
    },
    methods: {
        // 正则表达验证信息
        checkPhone(){
            let check1 = ApiCheck.checkPhone(this.phone);
            if(check1){
                this.errData.errPhone = false;
            }else{
                this.errData.errPhone = true;
            }
        },
        // 检测验证码
        checkyzm(){
            let check2 = ApiCheck.checkyzm(this.phoneyzm);
            if(check2){
                this.errData.erryzm = false;
            }else{
                this.errData.erryzm = true;
            }
        },
        // 检测密码1
        checkpwd1(){
            let check3 = ApiCheck.checkyzm(this.pwd1);
            if(check3){
                this.errData.errPwd1 = false;
            }else{
                this.errData.errPwd1 = true;
            }
        },
        // 检测密码2
        checkpwd2(){
            let check4 = ApiCheck.checkyzm(this.pwd2);
            if(check4 && this.pwd1 == this.pwd2){
                this.errData.errPwd2 = false;
            }else{
                this.errData.errPwd2 = true;
            }
        },
        // 获取手机身份验证码data_from为空
        getyzm(){
            // 获取验证码时，开启定时器
            this.interval();
            // 判断条件，如果手机号和密码为空，不可以请求数据else{
            // 请求数据验证
            this.axios.post("/getyzm/register/sendsms",{
                        dd_phone:this.phone,
                        method:'reset'
                }).then((res) => {
                    // 成功提示
                this.$notify({
                    title: '获取验证码成功',
                    // message: '这是一条成功的提示消息',
                    type: 'success'
                })
                console.log("获取验证码成功", res);
            });
            
        },
        // 找回密码
        getPwd(){
            // 添加判断条件，如果为空不可以请求
            this.axios.post("/getyzm/register/retrieve",{
                    dd_phone:this.phone,
                    dd_code:this.phoneyzm,
            }).then((res)=>{
                console.log('找回密码验证身份成功',res);
                // 身份验证成功，才可以点击下一步
                // 成功提示
                this.$notify({
                    title: '身份验证成功',
                    // message: '这是一条成功的提示消息',
                    type: 'success'
                })
                this.num = 2;
            })
            
        },
        // 重置密码
        setPwd(){
            // 请求数据验证
            this.axios.post("/getyzm/register/reset",{
                        dd_phone:this.phone,
                        dd_password:this.pwd1,
                        dd_confirmpassword:this.pwd2
                }).then((res) => {
                // 成功提示
                this.$notify({
                    title: '重置密码成功',
                    // message: '这是一条成功的提示消息',
                    type: 'success'
                })
                // 跳转到第三步
                this.num = 3;
                //重置密码成功的定时器开启
                this.setSuccess = true;
                // 调用定时器2
                this.interva2();
            });
        },
        //定时器1
        interval(){
            //setInterval()  执行多次的定时器
            var t3 = setInterval(()=>{
                if(this.yzmTime==0 || this.num != 1){
                    clearInterval(t3);//清除定时器
                    // 重置数据
                    this.yzmTime=60;
                    this.setdisabled = false;
                    this.setText = "获取手机验证码";
                    return;           //退出函数
                }
                // 每过一秒更新文本
                this.setText = `${this.yzmTime}S后重新获取`
                this.yzmTime--;
            },1000)
        },
        //定时器2 返回登录的页面
        interva2(){
            var t2 = setInterval(()=>{
                // 如果点击登录就清除定时器
                if(this.isGoLogin == true || this.goLoginTime==0){
                    clearInterval(t2);//清除定时器
                    // 并且跳转到登录页
                    this.toLogin();
                }
                // 每过一秒更新文本
                this.setTimeText = `${this.goLoginTime}S后自动返回登录`
                this.goLoginTime--;
                console.log(this.goLoginTime);
            },1000)
        },
        // 跳转到登录页
        toLogin(){
            this.$router.push({name:'login'});
            // 把时间设置为0也会关闭定时器
            this.goLoginTime = 0;
        },
        // 跳转到首页
        toHome(){
            this.$router.push({name:'product'});
        },
        // 点击获取手机验证码事件
        getnum(){
            // 判断是否执行定时器
            // 判断文本和按钮可选状态显示
            if(this.setText=="获取手机验证码"){
                this.setdisabled=true;
                this.setText = "60S后重新获取";
            }else{
                this.setdisabled=false;
                this.setText = "获取手机验证码";
            }
            if(this.time==60 && this.num==1){
                this.interval();
            }
        }
    },
}

</script>

